<template>
  <div class="cart-list">
    <!-- :probeType ="3" -->
    <!-- 使用滚动插件 -->
    <scroll class="contents" ref="scroll">
      <!-- 使用购物车商品的组件 -->
     <cart-list-itrm v-for="(item,index) in list" :key="index" :itemInfo ="item"/>
    </scroll>
  </div>
</template>

<script>
// 导入购物车商品的组件
import CartListItrm from './CartListItrm'

//导入滚动的插件
import Scroll from "components/common/scroll/Scroll";

// 导入Vuex的mapGetters辅助函数  mapGetters辅助函数仅仅是将store(Vuex实例的对象)中的个getter(计算属性)映射到局部计算属性
import { mapGetters } from 'vuex'

export default {
  name:'CartList',
  components:{
    Scroll,
    CartListItrm
  },
  computed:{
    ...mapGetters({
      // 商品列表的数据
       list:'cartList'
    })
  },
  // 进入当前页面时调用
  activated() {
    //  refresh() 函数重新计算滚动的高度（数据）
    this.$refs.scroll.refresh()
  },
}
</script>

<style scoped>
 .contents{
  position: absolute;
  top: 44px;
  bottom: 89px;
  left: 0;
  right: 0;
  overflow: hidden;
 } 
</style>